<template>
 
  <h1>2. watch监听 reactive创建的引用类型数据 {{ obj }}</h1>
  <button @click="obj.cart.name='BABA'">reactive引用类型</button>
</template>
<!-- 在script标签上 写入setup 就是 setup入口函数的语法糖  -->
<script setup>
import { ref, computed, onMounted, watch ,reactive } from 'vue'

 const obj = reactive({
      name: "张三",
      age: 20,
      cart: {
        name: "宝马",
      },
    })

    // 注意：监听对象中的某个属性 必须写成回调的方式 否则监听不到
    watch(()=>obj.cart,(newal,oldVal)=>{
      console.log(newal,oldVal);
    },{
      immediate:true, // 立即监听一次
      deep:true // 深度监听
    })




    // // 注意：监听对象中的某个属性 必须写成回调的方式 否则监听不到
//     watch(()=>obj.age,(newal,oldVal)=>{
//       console.log(newal,oldVal);
//     })


  // 错误写法
  // watch("obj.age",(newal,oldVal)=>{
  //   console.log(newal,oldVal);
  // })


    // 错误写法 监听不到
// watch(obj.age,(newal,oldVal)=>{
//   console.log(newal,oldVal);
// })
</script>
<!-- 再写一个script标签 使用Vue2的方法 写入name属性 -->
<script>
export default {
  name: 'App',
}
</script>
